<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/swiper.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/swiper.min.js' %}"></script>
    <script src="{% static 'js/vue.js' %}"></script>
    <script src="https://cdn.bootcss.com/reqwest/2.0.5/reqwest.min.js"></script>
</head>
<body>

<div class="banner" id="gongzuoshi">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="{% static 'img/banner1.png' %}" alt=""></div>
            <div class="swiper-slide"><img src="{% static 'img/banner1.png' %}" alt=""></div>
            <div class="swiper-slide"><img src="{% static 'img/banner1.png' %}" alt=""></div>
            <div class="swiper-slide"><img src="{% static 'img/banner1.png' %}" alt=""></div>
        </div>
        <div class="con">
            <img src="{% static 'img/logo.png' %}" alt="">
            源工作室
        </div>
    </div>
    <div class="sldBar">

        <div class="sl_lt">
            <span class="button-next"><i class="glyphicon glyphicon-menu-left"></i></span>
            <span class="button-prev"><i class="glyphicon glyphicon-menu-right"></i></span>
        </div>
        <div class="sl_rt">
            <a href="#we"><span><i class="glyphicon glyphicon-menu-down"></i></span></a>
        </div>
        <div class="sl_list">
            <div class="swiper-pagination"></div>
        </div>
    </div>
</div>

<nav class="navbar navbar-default navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="javascript:;" name="we"><img alt="源工作室" src="{% static 'img/logo.png' %}">源工作室</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#gongzuoshi">工作室</a></li>
                <li><a href="#gongzuo">我们工作</a></li>
                <li><a href="#lianxi">联系我们</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="content" id="gongzuo">
    <div class="container">
        <div class="title">
            Our Projects
            <br>
            <span>量身订制，要“快”，更要“稳”</span>
        </div>
        <ul class="nav nav-pills nav-stacked navbar-left clearfix" id="list">
            <li class="n_tit"><a href="javascript:;">工 作 日 志</a></li>
            <!--{% for class in project_class %}-->
            <!--{% if '所有类目' in class.name %}-->
            <!--<li role="presentation" @click="newName" class="active"><a href="javascript:;">{{ class.name }}</a></li>-->
            <!--{% else %}-->
            <!--<li role="presentation" @click="newName"><a href="javascript:;">{{ class.name }}</a></li>-->
            <!--{% endif %}-->
            <!--{% endfor %}-->
            <li role="presentation"  @click="newName" :id="item.id" v-for="(item,index) in tipList" :class="{'active':item.id == select}"><a href="javascript:;" v-text="item.name"></a></li>
            <!--<li role="presentation" class="active"><a href="javascript:;">所有类目</a></li>-->
            <!--<li role="presentation"><a href="javascript:;">基础模板</a></li>-->
            <!--<li role="presentation"><a href="javascript:;">私人定制</a></li>-->
            <!--<li role="presentation"><a href="javascript:;">后台数据</a></li>-->
            <!--<li role="presentation"><a href="javascript:;">API爬虫</a></li>-->
            <!--<li role="presentation"><a href="javascript:;">APP开发</a></li>-->
        </ul>
        <ul class="list-group navbar-right clearfix" id="data_lst">
            <!--{% for project in projects %}-->
            <!--&lt;!&ndash;{{ project.title }}&ndash;&gt;-->
            <!--<li class="list-group-item" data-val="{{ project.belong_class }}"><img src="/media/{{ project.pic }}"><a href="javascript:;"><i>{{ project.title }}</i></a></li>-->

            <!--&lt;!&ndash;<img src="/media/{{ project.pic }}" alt="">&ndash;&gt;-->
            <!--&lt;!&ndash;{{ project.belong_class }}&ndash;&gt;  :href="x`web_detail+'?id='+item.id"-->
            <!--{% endfor %}-->
            <div class="loading" v-if="pageDataNow.length==0">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <!--<li class="list-group-item" v-for="(item,index) in pageDataNow" v-if="pageDataNow.length!=0"><a :href="url+'detail/?id='+item[2]" target="_blank" ><img :src="item[1]"><span><i v-text="item[0]"></i></span></a></li>-->
            <li class="list-group-item" v-for="(item,index) in pageDataNow" v-if="pageDataNow.length!=0"><a href="javascript:;"><img :src="item[1]"><span><i v-text="item[0]"></i></span></a></li>
        </ul>
    </div>
    <div class="container">
        <nav aria-label="Page navigation " id="page_link">
            <ul class="pagination">
                <li v-for="(item,index) in pageAll" :class="{'active':index == pageNow-1}"><a href="javascript:;" @click="newPage" v-text="index+1"></a></li>
            </ul>
        </nav>
    </div>
</div>
<div class="call" id="lianxi">

    <div class="container">
        <div class="title">
            Connection Us
            <br>
            <span>已有“{{ user_data.times }}”人走在了您的前方，还不尽快留下您的足记</span>
            <!--<span>已有“{{ user_data|length }}”人走在了您的前方，还不尽快留下您的足记</span>-->
        </div>
        <div class="from">
            <div class="form-group">
                <input type="text" class="fml" id="userName" name="name" placeholder="名      字">
                <input type="tel" class="fml" id="phone" name="tel" placeholder="手 机 号">
                <textarea id="textArea" class="fml" rows="3" name="text" placeholder="说点什么吧"></textarea>
                <button id="index_get" type="submit" class="btn btn-default">预 约</button>
            </div>
        </div>
        <ul class="nav nav-pills nav-stacked navbar-left">
            <li role="presentation">联 系 我 们</li>
            <li role="presentation">邮 箱：{{ connect_us.e_mail }}</li>
            <li role="presentation">电 话：{{ connect_us.tel }}</li>
            <li role="presentation">地 址：{{ connect_us.address }}</li>
        </ul>
    </div>
</div>
</body>
<script>
    var swiper = new Swiper('.swiper-container', {
        navigation: {
            prevEl: '.button-next',
            nextEl: '.button-prev',
        },
        autoplay: {
            delay: 4000,
            disableOnInteraction: false,
        },
        effect:'fade',
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
    });
    $(function () {
        var pjt_list = new Vue({
            el:"#gongzuo",
            data:{
                url: '/web/get_pic/?tag=1&page=1',
                initData: [],
                saveBanner: [],
                saveTip: [],
                saveContent: {},
                reqData: [],
                pageAll: '',
                pageNow: 1,
                pageDataNow: [],
                tipList: [],
                select: 1,
                fstInit:true
            },
            methods:{
                checkData:function () {
                    this.initData = JSON.parse(localStorage.getItem(this.url))
                    if(this.initData){
                        this.pageAll = this.initData.pageAll
                        this.pageDataNow = this.initData.pageData
                    }
                    this.reqData(1,1)
                },
                reqData:function (x,y) {
                    this.initData = JSON.parse(localStorage.getItem(x.toString()+y.toString()))
                    this.url = '{% url 'web_get_pic_get' %}?tag='+x+'&page='+y
                    if(this.initData){
                        this.pageAll = this.initData.pageAll
                        this.pageDataNow = this.initData.pageData
                    }
                    var self = this
                    this.pageDataNow = []
                    if (this.fstInit) {
                        reqwest({
                            url: '{% url 'get_pro_class' %}'
                            , method: 'get'
                            , data: {
                            }
                            , success: function (res) {
                                $.each(res, function (k) {
                                    self.tipList.push(res[k])
                                })
                            }
                            , error: function (resp) {
                                alert("出现某种异常，请稍后重试。");
                            }
                        })
                    }
                    reqwest({
                        url: self.url
                        , method: 'get'
                        , data: {
                        }
                        , success: function (res) {
                            $.each(res, function (k) {
                                if (k == 0) {
                                    self.pageAll = res[k].num_pages
                                } else {
                                    var arr = []
                                    arr.push(res[k].title)
                                    arr.push(res[k].pic)
                                    if (res[k].detail) {
                                        arr.push(res[k].detail)
                                    } else {
                                        arr.push('working')
                                    }
                                    self.pageDataNow.push(arr)
                                }
                            });

                            self.saveContent = {pageAll:self.pageAll,pageData:self.pageDataNow}
                            var saveData = self.saveContent
                            saveData = JSON.stringify(saveData)
                            localStorage.setItem(self.url, saveData)
                            self.fstInit = false
                        }
                        , error: function (resp) {
                            self.pageDataNow = []
                            alert("出现某种异常，请稍后重试。");
                        }
                    });
                },
                newPage:function () {
                    this.pageNow = event.currentTarget.innerHTML;
                    this.reqData(this.select,this.pageNow)
                },
                newName:function () {
                    var id = event.currentTarget.id;
                    this.select = event.currentTarget.id;
                    this.pageNow = 1;
                    this.reqData(id,this.pageNow)
                },
            },
            beforeMount:function(){
                this.url = window.location.href
                this.url = this.url.replace('/index','')
                this.checkData()
            },
            updated:function () {

            }
        });
    });



    $("#index_get").click(function(){
        reqwest({
            url: '{% url "web_index_" %}'
            , method: 'get'
            , data: { name: $("#userName").val(), tel: $("#phone").val(), text:$("#textArea").val()}
            , success: function (resp) {
                alert(resp);
                $('#result').html(resp);
            }
            , error: function (resp) {
                alert("出现某种异常，请稍后重试。");
            }
        })
    });

</script>
